<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Pesquisar Cliente
        </ui:define>


        <ui:define name="content">           
            <h:form id="pesquisarClienteForm">

                <p:messages id="pesquisarPessoaMessages" autoUpdate="true" />

                <div class="actions">
                    <div id="buttons">
                        <p:button value="Cadastrar Cliente" outcome="criarCliente.xhtml"
                                  icon="ui-icon-plus" styleClass="ui-priority-primary">
                        </p:button>
                    </div>
                </div>                

                <f:validateBean disabled="true">

                    <p:fieldset legend="Filtros" id="dadosPessoaPanel">

                        <div class="row">
                            <div class="column1">
                                <p:outputLabel value="Tipo" for="nomeInputText"
                                               rendered="#{ managerPesquisarPessoa.pessoaPesquisar.id == null }" />
                            </div>
                            <div class="column10">                                
                                <p:selectOneRadio id="tipoPessoaSelectOneMenu" value="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa }" >
                                    <f:selectItems value="#{ enums.tiposPessoa() }" />
                                    <p:ajax event="change" update="dadosPessoaPanel, :pesquisarClienteForm:clientesDataTable"
                                            listener="#{ managerPesquisarPessoa.limpar(managerPesquisarPessoa.pessoaPesquisar.tipoPessoa) }"/>
                                </p:selectOneRadio>
                            </div>
                        </div>

                        <div class="row">                            
                            <div class="column1">
                                <p:outputLabel value="Nome" for="nomeInputText"
                                               rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                            </div>
                            <div class="column5">
                                <p:inputText id="nomeInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.nome }"
                                             rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                            </div>

                            <div class="column1">
                                <p:outputLabel value="CPF" for="cpfInputMask"
                                               rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                            </div>
                            <div class="column4">
                                <p:inputMask id="cpfInputMask" value="#{ managerPesquisarPessoa.pessoaPesquisar.cpf }"
                                             rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" mask="999.999.999-99" />
                            </div>
                        </div>                            

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Razão Social" for="razaoSocialInputText"
                                               rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                            </div>
                            <div class="column5">
                                <p:inputText id="razaoSocialInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.razaoSocial }"
                                             rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                            </div>
                            <div class="column1">
                                <p:outputLabel value="CNPJ" for="cnpjInputText"
                                               rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                            </div>
                            <div class="column4">
                                <p:inputMask id="cnpjInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.cnpj }"
                                             mask="99.999.999/9999-99" rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText"
                                               rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                            </div>
                            <div class="column5">
                                <p:inputText id="nomeFantasiaInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.nome }"
                                             rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                            </div>
                        </div>
                    </p:fieldset>

                </f:validateBean>

                <div class="command">
                    <p:commandButton
                        id="pesquisarCommandButton" value="Pesquisar" icon="ui-icon-search"
                        styleClass="ui-priority-primary"
                        update="@form" actionListener="#{ managerPesquisarPessoa.pesquisarCliente() }" />
                    <p:commandButton value="Limpar" icon="ui-icon-close" update="@form"
                                     actionListener="#{ managerPesquisarPessoa.limpar(managerPesquisarPessoa.pessoaPesquisar.tipoPessoa) }" />
                </div>

                <p:fieldset legend="Resultado" id="resultadoFieldset">

                    <p:dataTable id="clientesDataTable" var="cliente" value="#{ managerPesquisarPessoa.pessoas }"
                                 rows="10" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado">
                        <p:column width="5%" headerText="Opções">
                            <div class="options1">
                                <p:button
                                    title="Visualizar" href="visualizarCliente.xhtml?pessoaId=#{ cliente.id }"
                                    icon="ui-icon-search"/>
                            </div>
                        </p:column>

                        <p:column headerText="Razão Social" rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA' }"
                                  width="50%">
                            <h:outputText value="#{ cliente.razaoSocial }" />
                        </p:column>
                        <p:column headerText="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? 'Nome' : 'Nome Fantasia'}"
                                  width="50%">
                            <h:outputText value="#{ cliente.nome }" />
                        </p:column>
                        <p:column headerText="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? 'CPF' : 'CNPJ'}"
                                  width="40%">
                            <h:outputText value="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? managerPesquisarPessoa.adicionarMascaraCPF(cliente.cpf) : managerPesquisarPessoa.adicionarMascaraCNPJ(cliente.cnpj)  }" />
                        </p:column>
                    </p:dataTable>
                </p:fieldset>

                <p:blockUI block=":pesquisarClienteForm:clientesDataTable" trigger=":pesquisarClienteForm:pesquisarCommandButton">
                    Pesquisando...
                </p:blockUI>

            </h:form>

            <script>
                $(document).ready(function() {
                    setSelectedMenu('#cliente');
                });
            </script>

        </ui:define>
    </ui:composition>

</html>